body{
    margin: 0;
    font-size: 12px; 
}
header{
    height: 40px;
    background: #ff4466;
    line-height: 40px;
    color: #fff;
    text-align: center;
    font-size: 14px;
}
main{
    width: 95%;
    margin: 20px auto;    
}
.clearFix {
    content: '';
    clear: both;
    display: table;
}
.inputWrap{
    position: relative;
    text-align: center;
}
.btnSearch{
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #3488b1;
    background-color: #3488b1;
    color: #fff;
    padding: 2px 15px;
}
.btnSearch:active,.btnSearch:focus{
    outline: none;
}
.inputWrap input {
    padding-left: 30px;
}
.fa-search{
    position: absolute;
    top: 10px;
    left: 10px;
}
.searchHistory p{
    margin-left: 6px;
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 14px;
}
.searchHistory span{
    margin: 10px 6px 0;
    padding: 4px 6px;
    border: 1px solid #4fb6e8;
    display: inline-block;
    background: #4fb6e8;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}
.searchResult{
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    padding: 6px;
    margin-top: 10px;
}
.searchResult:not(:last-child){
    border-bottom: 1px solid #ddd;
}
.leftCover{
    width: 23%;
    float: left;
    height: 80px;
    overflow: hidden;
}
.leftCover img{
    display: block;
    margin: 0 auto;
    height: 100%;
}
.rightIntro{
    width: 75%;
    margin-left: 2%;
    float: left;
}
.smallIntro{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.result:not(:last-child){
    border-bottom: 1px solid #ddd;
}
.result a {
    color: #666
}

.bookIntroHeader{
    height: 40px;
    width: 100%;
    background-color: #ff4466;
    color: #fff;
    line-height: 40px;
}
.bookIntroHeader a {
    color: #fff;
}
.backBtn,
.serchResultIntro,
.homeBtn{
    width: 33.333333333%;
    display: inline-block;
}
.backBtn{
    text-align: left;
    padding-left: 15px;
}
.homeBtn{
    text-align: right;
    padding-right: 15px;
}
.fa-angle-left{
    float: left;
    margin-top: 5px;
    margin-right: 6px;
}

.bookIntroMainSection{
    min-height: 400px;
    margin: 15px 15px;
}

.bookInfo .title{
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.rightIntro .title {
    font-size: 14px;
    color: #333;
}
.authorAndType{
    font-size: 12px;
}
.bookInfo {
    color: #888;
}
.bookInfo .author{
    color: #ff4466;
}
.bookInfo span:not(:first-child){
    margin-left: 4px;
    margin-right: 4px;
}
.bookInfo span:first-child{
    margin-right: 4px;
}
.updateTime{
    float: left;
    width: 75%;
    margin-left: 2%;
    font-size: 12px;
    margin-top: 6px;
}
.bookIntroBtn{
    float: left;
    width: 45%;
    text-align: center;
    border: 1px solid #ff4466;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    border-radius: 4px;
    margin: 15px 0;
}
.buttonCheckNew{
    margin-right: 10%;
    color: #ff4466;
}
.buttonStartRead{
    background-color: #ff4466;
    color: #fff;
}
.fa-plus {
    margin-right: 6px;
}
.bookThreeMajor{
    width: 100%;
}
.bookIntroColunm{
    width: 33.33333333333%;
    float: left;
    text-align: center;
    font-size: 12px;
}
.bookIntroColunm P:last-child{
    font-size: 16px;
    color: #333;
}
.bookIntroDesc{
    font-size: 12px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hotCommentAuthorIcon{
    width: 12%;
    float: left;
}
.hotCommentAuthorIcon img{
    width: 100%;
    border-radius: 6px;
}
.hotCommentAuthorWord{
    width:86%;
    margin-left: 2%;
    float: left;
}
.hotCommentAuthorName{
    position: relative;
}
.hotCommentPublishTime{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: #888;
}
.hotCommentTitle{
    font-size: 14px;
    font-weight: bold;
    margin: 6px 0;
}
.hotCommentContent{
    color: #888;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: justify;
    max-height: 34px;
    overflow: hidden;
}
.bookStar i{
    color: #ff4466;
    margin-right: 4px;
    font-size: 10px;
}
.hotCommentContentAgree i{
    margin-right: 6px;
}

.commentHeader{
    font-size: 16px;
    margin: 10px 0;
}
.hotCommentList{
    margin-bottom: 10px;
}
.hotCommentContentAgree i{
    color: #ff4466;
}

.readColor{
    color: #ff4466;
    margin: 0 4px;
}

.searchResultIntro{
    margin-top: 10px;
    margin-left: 6px;
    font-size: 14px;
}
.serchResultIntro{
    text-align: center;
    font-size: 14px;
}
.mainContent{
    text-align: justify;
    width: 95%;
    margin: 10px auto 0;
    font-size: 14px;
    letter-spacing: 1px;
}
.mainContent pre{
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: block;
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: none;
    border-radius: 0;
    background: #eee6dd;
}
.bookDetail{
    background: #eee6dd;
    padding-top: 40px;
}
.bookDetail .bookIntroHeader{
    position: fixed;
    top: 0;
}
.bookDetail .backBtn,
.bookDetail .serchResultIntro,
.bookDetail .homeBtn{
    float: left;
}
.bookDetail .serchResultIntro{
    white-space: nowrap;
    overflow: hidden;
    width: 60%;
    text-overflow: ellipsis;
}
.bookDetail .backBtn,
.bookDetail .homeBtn{
    width: 20%;
}

.mainFooter{
    position: fixed;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    line-height: 40px;
}
.mainFooter a{
    color: #fff;
}
.mainFooter .prevBtn,
.mainFooter .nextBtn{
    width: 50%;
    float: left;
    text-align: center;
    font-size: 16px;
}


/**
* loading animation
*/
.mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 9998;
}
.spinner {
    width: 40px;
    height: 40px;
    background-color: #ff4466;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 9999;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
  
  @keyframes sk-rotateplane {
    0% { 
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

  /**
  * 路由过渡动画
  */
  